<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>乐在购物网_商户注册</title>


    <link th:href="@{/static/css/load.css}" rel="stylesheet">
    <link th:href="@{/static/css/style.css}" rel="stylesheet">
    <link th:href="@{static/css/style-responsive.css}" rel="stylesheet">

    <link href="/static/js/iCheck/skins/minimal/minimal.css" rel="stylesheet">
    <link href="/static/js/iCheck/skins/minimal/blue.css" rel="stylesheet">
    <link href="/static/js/iCheck/skins/square/square.css" rel="stylesheet">
    <link href="/static/js/iCheck/skins/square/blue.css" rel="stylesheet">
    <link href="/static/js/iCheck/skins/flat/blue.css" rel="stylesheet">
    <!--file upload-->
    <link rel="stylesheet" type="text/css" th:href="@{static/css/bootstrap-fileupload.min.css}" />

    <!--图片裁剪-->
    <link rel="stylesheet" type="text/css" href="/static/plug-in/image-cut/css/normalize.css" />
<!--    <link rel="stylesheet" type="text/css" href="/static/plug-in/image-cut/css/default.css">-->
    <style>
        #clipArea {
            margin: 20px;
            height: 300px;
        }
        #file,
        #clipBtn {
            margin: 20px;
        }
        #view {
            margin: 0 auto;
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body class="login-body mer-regist loading">

<div class="container">

    <form class="form-signin bucket-form" id="registForm" method="post" th:action="@{/regist_merchants}" enctype="multipart/form-data">
        <div class="form-signin-heading text-center">
            <h1 class="sign-title">商户注册</h1>
            <img th:src="@{/static/images/login-logo.png}" alt=""/>
        </div>
        <div class="login-wrap">
            <div th:replace="common/common_mer :: #com_alert"></div>
            <p>请在下面输入您的个人详细信息</p>
            <div class="form-group">
                <label for="name" class="line">本人姓名：</label>
                <input type="text" autofocus maxlength="15" name="name" id="name" placeholder="本人姓名" class="form-control" required>
            </div>
            <div class="form-group">
                <label for="gender" class="line">性别：</label>
                <div class="square-blue single-row">
                    <div class="radios" id="gender">
                        <label for="radio-01" class="col-lg-6 col-sm-6">
                            <input type="radio" name="gender" checked="" value="男" id="radio-01" >
                            <label>男性</label>
                        </label>
                        <label for="radio-02" class="col-lg-6 col-sm-6">
                            <input type="radio" name="gender" value="女" id="radio-02" >
                            <label>女性</label>
                        </label>
                    </div>
                </div>
            </div>
            <label for="email" class="line">Email邮箱：</label>
            <input type="text" id="email" name="email" placeholder="Email邮箱" title="点击设置邮箱" onclick="ver_email()" class="form-control" required readonly>
            <label for="phonenum" class="line">电话号码：</label>
            <input type="text" id="phonenum" name="phonenum" placeholder="电话号码" class="form-control" required>
            <hr>
            <p> 请在下面输入您的账户的信息</p>
            <label for="account" class="line">用户名：</label>
            <input type="text" id="account" name="account" placeholder="用户名" class="form-control" required>
            <label for="password1" class="line">输入密码：</label>
            <input type="password" placeholder="请输入密码" id="password1" name="password1" class="form-control" required>
            <label for="password" class="line">确认密码：</label>
            <input type="password" placeholder="再次输入密码" id="password" name="password" class="form-control" required>
            <hr>
            <p> 请在下面输入您的创建的店铺信息</p>
            <label for="store_name" class="line">店铺名称：</label>
            <input type="text" id="store_name" name="store_name" placeholder="店铺名称" class="form-control" required>
            <label for="address" class="line">地区信息：</label>
            <input type="text" id="address" name="address" placeholder="所在地区" class="form-control" required>

            <div class="form-group">
                <label for="image" class="line">商铺图片：</label>
                <div class="text-center" style="background-color: #d6d6d6;display: table;padding: 8px" data-toggle="modal" data-target="#img_cut">
                    <div id="show" style="width: 150px;height: 150px;background-color: white;background-repeat: no-repeat; background-position: center center; background-size: contain;"></div>
                    <span class="btn btn-default" style="margin-top: 8px"><i class="fa fa-picture-o"></i> 选择图片</span>
                </div>
                <input id="image" type="hidden" name="image" />
            </div>
            <!-- 图片裁剪模态框（Modal） -->
            <div class="modal fade" id="img_cut" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                选择图片裁剪
                            </h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div id="clipArea"></div>
                            </div>
                            <div class="row text-center">
                                <div class="col-md-9">
                                    <input type="file" id="file">
                                </div>
                                <div class="col-md-3">
                                    <button class="btn btn-search btn-lg" id="clipBtn" onsubmit="return false;" onclick="return false;">截取图片</button>
                                </div>
                            </div>
                            <div class="row">
                                <div id="view" style="background-repeat: no-repeat; background-position: center center; background-size: contain;"></div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                关闭
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
            <div>
                <label for="store_introduce" class="line">商铺简介：</label>
                <textarea class="form-control" oninput="titleInput('store_introduce','t_introduce',150)" name="store_introduce" rows="3" id="store_introduce" placeholder="店铺的介绍" required></textarea>
                <p id="t_introduce" class="help-block">请输入商铺介绍（字数限制150字）</p>
            </div>
            <!--验证码-->
            <div class="row"style="text-align: center" th:if="${codeId}!=null">
                <div class="col-lg-6">
                    <img th:src="@{/static/images/QRcode.jpg}" style="height: 150px">
                </div>
                <div class="col-lg-6"style="padding-top: 15px">
                    <div class="row">
                        <label>扫码关注微信公众号,回复：<span class="text-danger" th:text="${codeId}"></span>;获取验证码</label>
                    </div>
                    <div class="row" style="padding-top: 10px">
                        <input type="hidden" name="id" th:value="${codeId}">
                        <input type="text" placeholder="输入验证码" class="form-control" name="code" required>
                    </div>
                </div>
            </div>

            <button type="submit" name="submit" class="btn btn-lg btn-login btn-block submit">
                <i class="fa fa-check"></i>
            </button>
            <div class="registration">
                已经注册了。
                <a th:href="@{/login_merchantsPage}">
                    去登录
                </a>
            </div>
        </div>
    </form>
    <!-- 设置邮箱Modal -->
    <div class="modal fade" id="email_model" role="dialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">设置邮箱</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-md-2 control-label">邮箱:</label>
                            <div class="col-md-7">
                                <input type="email" name="my_email" class="form-control" id="my_email" placeholder="请输入邮箱" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">验证码:</label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control" id="email_code" placeholder="请输入邮箱验证码" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label"></label>
                            <div class="col-md-7">
                                <input type="button" class="btn btn-search get_code" value="获取验证码">
                                <input type="button" class="btn btn-info ver_code" hidden value="验证邮箱">
                            </div>
                        </div>
                    </form>
                    <script src="/static/my_js/encryp/md5.js"></script>
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                    <button class="btn btn-primary" onclick="ver_EmailCoed()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- modal -->
</div>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="/static/my_js/encryp/md5.js"></script>
<!-- Placed js at the end of the document so the pages load faster -->
<script th:src="@{/static/js/jquery-1.10.2.min.js}"></script>
<script src="/static/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/static/js/jquery-migrate-1.2.1.min.js"></script>
<script th:src="@{/static/js/bootstrap.min.js}"></script>
<script th:src="@{/static/js/modernizr.min.js}"></script>
<!--file upload-->
<script type="text/javascript" th:src="@{/static/js/bootstrap-fileupload.min.js}"></script>
<!--图片裁剪-->
<script src="/static/plug-in/image-cut/js/iscroll-zoom.js"></script>
<script src="/static/plug-in/image-cut/js/hammer.js"></script>
<script src="/static/plug-in/image-cut/js/lrz.all.bundle.js"></script>
<script src="/static/plug-in/image-cut/js/jquery.photoClip.js"></script>
<!--自定义js-->
<script src="/static/my_js/img-cut.js"></script>
<script src="/static/my_js/input.js"></script>
<script src="/static/my_js/mer/registration.js"></script>
<!--icheck -->
<!--<script src="/static/js/iCheck/jquery.icheck.js"></script>-->
<script>

    document.body.classList.remove('loading');

</script>
</body>
</html>
